<template>
  <div class="inner-div" id="dashBoardDiv">
    <el-card class="one-four-card" v-loading="loading">
      <template #header>
        BASE INFO
      </template>
      <p>操作系统:{{ pageInfo.osName }}</p>
      <p>系统架构:{{ pageInfo.architecture }}</p>
      <p>Java版本:{{ pageInfo.jdkVersion }}</p>
      <p>处理器核心数:{{ pageInfo.cpuCoreNum }}</p>
    </el-card>
    <el-card class="one-four-card" v-loading="loading">
      <template #header>
        CPU INFO
      </template>
      <div id="cpuDashboard" style="width: 100%; height: 350px">
      </div>
    </el-card>
    <el-card class="one-four-card" v-loading="loading">
      <template #header>
        MEMORY INFO
      </template>
      <div id="memoryDashboard" style="width: 100%; height: 350px">
      </div>
    </el-card>
    <el-card class="one-four-card" v-loading="loading">
      <template #header>
        DISK INFO
      </template>
      <div id="diskDashboard" style="width: 100%; height: 350px"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts/core';
import { TooltipComponent, type TooltipComponentOption } from 'echarts/components';
import { GaugeChart, type GaugeSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';


echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
import {onMounted, reactive, ref} from "vue";
import {allInfoReq} from "@/api/monitoring/server.ts";

type EChartsOption = echarts.ComposeOption<
    TooltipComponentOption | GaugeSeriesOption
>;

interface PageInfo {
  osName: string,
  architecture: string,
  jdkVersion: string,
  cpuCoreNum: string,
  cpuUsage: string,
  memoryUsage: string,
  diskRadio: string,
  totalDisk: string,
  usedDisk: string,
}

const pageInfo = reactive<PageInfo>({
  osName: "",
  architecture: "",
  jdkVersion: "",
  cpuCoreNum: "",
  cpuUsage: "",
  memoryUsage: "",
  diskRadio: "",
  totalDisk: "",
  usedDisk: "",
})

const loading = ref(true)

const initServerInfo = async () => {
  const res: any = await allInfoReq();
  loading.value = false;
  copyResInfo(res);
  initCpuInfo();
  initMemoryInfo();
  initDiskInfo();
}

const copyResInfo = (res: any) => {
  pageInfo.osName = res.data.osName
  pageInfo.architecture = res.data.architecture
  pageInfo.jdkVersion = res.data.jdkVersion
  pageInfo.cpuCoreNum = res.data.cpuCoreNum
  pageInfo.cpuUsage = res.data.cpuUsage
  pageInfo.memoryUsage = res.data.memoryUsage
  pageInfo.diskRadio = res.data.diskRadio
  pageInfo.totalDisk = res.data.totalDisk
  pageInfo.usedDisk = res.data.usedDisk
}

let cpuDashboardOption: EChartsOption = {}
const initCpuInfo = () => {
  const cpuDashboardChart = echarts.init(document.getElementById("cpuDashboard"));
  cpuDashboardOption = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%'
        },
        data: [
          {
            value: parseFloat(pageInfo.cpuUsage.replace('%', '')),
            name: 'CPU占用率'
          }
        ]
      }
    ]
  }
  cpuDashboardChart.setOption(cpuDashboardOption)
}

let memoryDashboardOption: EChartsOption = {}
const initMemoryInfo = () => {
  const memoryDashboardChart = echarts.init(document.getElementById("memoryDashboard"));
  memoryDashboardOption = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%'
        },
        data: [
          {
            value: parseFloat(pageInfo.memoryUsage.replace('%', '')),
            name: '内存占用率'
          }
        ]
      }
    ]
  }
  memoryDashboardChart.setOption(memoryDashboardOption)
}

let diskDashboardOption: EChartsOption = {}
const initDiskInfo = () => {
  const diskDashboardChart = echarts.init(document.getElementById("diskDashboard"));
  diskDashboardOption = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%'
        },
        data: [
          {
            value: parseFloat(pageInfo.diskRadio.replace('%', '')),
            name: pageInfo.usedDisk + '/' + pageInfo.totalDisk
          }
        ]
      }
    ]
  }
  diskDashboardChart.setOption(diskDashboardOption)
}


onMounted(async () => {
  loading.value = true
  initServerInfo().then()
})
</script>

<style scoped>
.inner-div {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.one-four-card {
  width: 47%;
  height: 400px;
  margin: 1%;
}

.one-two-card {
  width: 96%;
  height: 500px;
  margin: 1%;
}

</style>